(function ($) {
	$.fn.sfComboBox = function (arg, value) {

	//TextField Parameters 
	var defaults = {
		data : arg.data,
		itemPage : arg.itemPage,
		image : arg.image, //In case user wants to replace the default image
		image_focus : arg.image_focus, //In case user wants to replace the default image
		width : arg.width, //In case user replaces the default image. It it necessary to adjust positioning of children elements
		height : arg.height, //In case user replaces the default image. It it necessary to adjust positioning of children elements
	};
		
	//Constructor
	if (typeof arg == 'object') {
		//Default Parameters in case they are not provided 
		var options = { 
		    data: arg.data, 
		    itemPage: arg.itemPage, 
		    image : 'url(combo/images/combo.png) no-repeat', 
		    image_focus : 'url(combo/images/combo_selected.png) no-repeat',
		    width : 205,
		    height : 33, 
		    scrollItem : 0, //Used for controlling scroll 
		    scrollPage : 0, //Used for controlling scroll 
		};
		opts = $.extend(options, defaults);
		
		//Father ID
		var fatherId = $(this).attr('id');
		
		//HTML Structure			
		var htmlContent = '<div id=' +fatherId+ '"_selected_option"></div> <div id=' +fatherId+ '"_option_list"></div> <div id=' +fatherId+ '"_scrollbar"></div>';
		
		//Append HTML Structure 		
		$(this).append(htmlContent);
		
		//Create the List of Options
		var list_width  = opts.width - 30; //Value used by list borders and scroll area 
		var list_height = opts.height - 2; //Space between list elements
		$(this).children(':nth-child(2)').sfListbox2({data: arg.data, width:list_width, height:list_height, itemsPerPage:opts.itemPage, horizontal:false,index: 0});

    //Create the Scroll
    var scroll_size = (opts.itemPage * (opts.height-1)) - 30; //Height = (itemPage * 32 (List item Height)) - 30 (Buttons up and Down)
    var scroll_pages  = Math.ceil(opts.data.length / opts.itemPage);
    var scroll_margin = opts.width - 17; //15 Scroll buttons (up/down) - 2 for getting closer
    
    $(this).children(':nth-child(3)').sfScrollbar2({size: scroll_size, pages:scroll_pages, type: 'vertical'});
		$(this).children(':nth-child(3)').css('margin-left',scroll_margin);
		
		//Combo Button
		$(this).children(':nth-child(1)').width(opts.width);
		$(this).children(':nth-child(1)').height(opts.height);
    $(this).children(':nth-child(1)').css('background',opts.image);
    
    $(this).children(':nth-child(2)').hide();
    $(this).children(':nth-child(3)').hide();
    		
		//Save Parameters
		$(this).data('opts', opts);
	}
	
	//Methods
	if (typeof arg == 'string') {
		arg = arg.toLowerCase();
		
		//Load Data
		var opts = jQuery(this).data('opts');
		
		//Scroll total pages
		var scroll_pages  = Math.ceil(opts.data.length / opts.itemPage);
				
		switch (arg) {
			case 'show':
				this.show();
				break;

			case 'hide':
				this.hide();
				break;
			
			case 'focus':
			  $(this).children(':nth-child(1)').css('background',opts.image_focus);
        break;
        	
			case 'blur':
        $(this).children(':nth-child(1)').css('background',opts.image);
        break;	
			
			case 'show_option':
			  $(this).children(':nth-child(2)').slideDown(1);
			  $(this).children(':nth-child(3)').show();
			  $(this).children(':nth-child(1)').css('background',opts.image);
        break;
        
      case 'hide_option':
        $(this).children(':nth-child(2)').slideUp(1);
        $(this).children(':nth-child(3)').hide();
        $(this).children(':nth-child(1)').css('background', opts.image_focus);
        break;
			
			case 'prev_option':
        $(this).children(':nth-child(2)').sfListbox2('prev');
        var listIndex = $(this).children(':nth-child(2)').sfListbox2('getIndex');
        
        //Scroll controll
        opts.scrollItem--;
        if (opts.scrollItem < 0){
          opts.scrollItem = opts.itemPage - 1; //Total Items - 1
          opts.scrollPage--; 
           
          if (opts.scrollPage < 0) { 
            opts.scrollPage = scroll_pages - 1; //Total Pages -1
            var itemLeft = opts.data.length % (opts.scrollPage +1);
            
            alert(itemLeft);alert(itemLeft);alert(itemLeft);alert(itemLeft);alert(itemLeft);
            if (itemLeft > 0) 
              opts.scrollItem = itemLeft-1; 
          }
              
          $(this).children(':nth-child(3)').sfScrollbar2('move',opts.scrollPage);
        } 
        break;	
				
			case 'next_option':
			  $(this).children(':nth-child(2)').sfListbox2('next');
			  var listIndex = $(this).children(':nth-child(2)').sfListbox2('getIndex');
			  
			  //Scroll controll
			  opts.scrollItem++;
			  if (opts.scrollItem >= opts.itemPage){ //Total Items
          opts.scrollPage++; 
          opts.scrollItem = 0;
          
          if (opts.scrollPage > (scroll_pages - 1)) //Total Pages - 1
            opts.scrollPage = 0;

          $(this).children(':nth-child(3)').sfScrollbar2('move',opts.scrollPage);
        } else if (listIndex == 0) {
           opts.scrollPage = 0; 
           opts.scrollItem = 0; 
           $(this).children(':nth-child(3)').sfScrollbar2('move',opts.scrollPage);
        }
        break;
			
			case 'select_option':
        var listIndex = $(this).children(':nth-child(2)').sfListbox2('getIndex');
        $(this).children(':nth-child(1)').html('<span>' + opts.data[listIndex] + '</span>');
        return listIndex;
        break;
			
			default:
				break;
				
		$(this).data('opts',opts);
		}
	}
	return this;
}})(jQuery);
